Globālu izkārtojumu veidošana: padziļināts ieskats CSS loģiskajās īpašībās

Mūsdienu savstarpēji saistītajā pasaulē tīmekļa vietnēm ir jāapkalpo daudzveidīga globāla auditorija. Tas nozīmē atbalstīt dažādas valodas un rakstības režīmus, no kreisās uz labo (LTR) līdz labajai uz kreiso (RTL) un pat vertikālo rakstību. Tradicionālās CSS īpašības, piemēram, left, right, top un bottom, ir pēc būtības atkarīgas no virziena, kas apgrūtina tādu izkārtojumu izveidi, kas nevainojami pielāgojas dažādiem rakstības režīmiem. Tieši šeit palīgā nāk CSS loģiskās īpašības.

Kas ir CSS loģiskās īpašības?

CSS loģiskās īpašības ir CSS īpašību kopums, kas definē izkārtojuma virzienus, pamatojoties uz satura plūsmu, nevis fiziskajiem virzieniem. Tās abstrahē ekrāna fizisko orientāciju, ļaujot jums definēt izkārtojuma noteikumus, kas tiek konsekventi piemēroti neatkarīgi no rakstības režīma vai virziena.

Tā vietā, lai domātu par left un right, jūs domājat par start un end. Tā vietā, lai domātu par top un bottom, jūs domājat par block-start un block-end. Pārlūkprogramma pēc tam automātiski piesaista šos loģiskos virzienus atbilstošajiem fiziskajiem virzieniem, pamatojoties uz elementa rakstības režīmu.

Pamatjēdzieni: Rakstības režīmi un teksta virziens

Pirms iedziļināties konkrētās īpašībās, ir svarīgi saprast divus pamatjēdzienus:

Rakstības režīmi

Rakstības režīmi nosaka virzienu, kādā tiek izkārtotas teksta rindas. Divi visbiežāk sastopamie rakstības režīmi ir:

horizontal-tb: Horizontāli no augšas uz leju (standarts tādām valodām kā angļu, spāņu, franču utt.)
vertical-rl: Vertikāli no labās uz kreiso (lieto dažās Austrumāzijas valodās, piemēram, japāņu un ķīniešu)

Pastāv arī citi rakstības režīmi, piemēram, vertical-lr (vertikāli no kreisās uz labo), taču tie ir retāk sastopami.

Teksta virziens

Teksta virziens norāda, kādā virzienā tiek attēloti rakstzīmes rindā. Visbiežāk sastopamie teksta virzieni ir:

ltr: No kreisās uz labo (standarts lielākajai daļai valodu)
rtl: No labās uz kreiso (lieto tādās valodās kā arābu, ebreju, persiešu utt.)

Šīs īpašības tiek iestatītas, izmantojot attiecīgi writing-mode un direction CSS īpašības. Piemēram:


 .rtl-example {
 direction: rtl;
 }

 .vertical-example {
 writing-mode: vertical-rl;
 }

Galvenās loģiskās īpašības

Šeit ir svarīgāko CSS loģisko īpašību sadalījums un to saistība ar fiziskajiem ekvivalentiem:

Kastes modeļa īpašības

Šīs īpašības kontrolē elementa polsterējumu (padding), atkāpi (margin) un apmali (border).

margin-inline-start: Ekvivalents margin-left LTR režīmā un margin-right RTL režīmā.
margin-inline-end: Ekvivalents margin-right LTR režīmā un margin-left RTL režīmā.
margin-block-start: Ekvivalents margin-top gan LTR, gan RTL režīmā.
margin-block-end: Ekvivalents margin-bottom gan LTR, gan RTL režīmā.
padding-inline-start: Ekvivalents padding-left LTR režīmā un padding-right RTL režīmā.
padding-inline-end: Ekvivalents padding-right LTR režīmā un padding-left RTL režīmā.
padding-block-start: Ekvivalents padding-top gan LTR, gan RTL režīmā.
padding-block-end: Ekvivalents padding-bottom gan LTR, gan RTL režīmā.
border-inline-start: Īsinājums apmales īpašību iestatīšanai loģiskajā sākuma pusē.
border-inline-end: Īsinājums apmales īpašību iestatīšanai loģiskajā beigu pusē.
border-block-start: Īsinājums apmales īpašību iestatīšanai loģiskajā augšējā pusē.
border-block-end: Īsinājums apmales īpašību iestatīšanai loģiskajā apakšējā pusē.

Piemērs: Pogas izveide ar konsekventu polsterējumu neatkarīgi no teksta virziena:


 .button {
 padding-inline-start: 1em;
 padding-inline-end: 1em;
 }

Pozicionēšanas īpašības

Šīs īpašības kontrolē elementa pozīciju tā vecākelementā.

inset-inline-start: Ekvivalents left LTR režīmā un right RTL režīmā.
inset-inline-end: Ekvivalents right LTR režīmā un left RTL režīmā.
inset-block-start: Ekvivalents top gan LTR, gan RTL režīmā.
inset-block-end: Ekvivalents bottom gan LTR, gan RTL režīmā.

Piemērs: Elementa pozicionēšana attiecībā pret tā konteinera sākuma un augšējām malām:


 .element {
 position: absolute;
 inset-inline-start: 10px;
 inset-block-start: 20px;
 }

Plūsmas izkārtojuma īpašības

Šīs īpašības kontrolē satura izkārtojumu konteinerā.

float-inline-start: Ekvivalents float: left LTR režīmā un float: right RTL režīmā.
float-inline-end: Ekvivalents float: right LTR režīmā un float: left RTL režīmā.
clear-inline-start: Ekvivalents clear: left LTR režīmā un clear: right RTL režīmā.
clear-inline-end: Ekvivalents clear: right LTR režīmā un clear: left RTL režīmā.

Piemērs: Attēla pludināšana uz satura plūsmas sākumu:


 .image {
 float-inline-start: left; /* Konsekvents vizuālais izvietojums gan LTR, gan RTL režīmā */
 }

Izmēra īpašības

inline-size: Attēlo horizontālo izmēru horizontālā rakstības režīmā un vertikālo izmēru vertikālā rakstības režīmā.
block-size: Attēlo vertikālo izmēru horizontālā rakstības režīmā un horizontālo izmēru vertikālā rakstības režīmā.
min-inline-size
max-inline-size
min-block-size
max-block-size

Šīs īpašības ir īpaši noderīgas, strādājot ar vertikāliem rakstības režīmiem.

Loģisko īpašību izmantošanas priekšrocības

CSS loģisko īpašību pieņemšana piedāvā vairākas būtiskas priekšrocības starptautiskam tīmekļa dizainam:

Uzlabota internacionalizācija (I18N): Veidojiet izkārtojumus, kas automātiski pielāgojas dažādiem rakstības režīmiem un teksta virzieniem, vienkāršojot vairāku valodu atbalsta procesu.
Uzlabota responsivitāte: Loģiskās īpašības papildina responsīvā dizaina principus, ļaujot jums veidot izkārtojumus, kas nevainojami pielāgojas dažādiem ekrāna izmēriem un orientācijām.
Koda uzturējamība: Samaziniet nepieciešamību pēc sarežģītiem mediju vaicājumiem un nosacījumu stiliem, kas balstīti uz valodu vai virzienu, tādējādi iegūstot tīrāku un vieglāk uzturamu CSS.
Samazināta sarežģītība: Abstrahējiet ekrāna fizisko orientāciju, padarot vieglāku izkārtojuma noteikumu izpratni un konsekventu dizainu veidošanu dažādās valodās un kultūrās.
Nākotnes nodrošinājums: Attīstoties rakstības režīmiem un izkārtojuma tehnoloģijām, loģiskās īpašības nodrošina elastīgāku un pielāgojamāku pieeju tīmekļa dizainam.

Praktiski piemēri un lietošanas gadījumi

Apskatīsim dažus praktiskus piemērus, kā jūs varat izmantot CSS loģiskās īpašības, lai izveidotu internacionalizētus izkārtojumus:

1. piemērs: Navigācijas izvēlnes izveide

Apsveriet navigācijas izvēlni, kurā vēlaties, lai izvēlnes elementi būtu līdzināti pa labi LTR valodās un pa kreisi RTL valodās.


 .nav {
 display: flex;
 justify-content: flex-end; /* Līdzina elementus līnijas beigās */
 }

Šajā gadījumā flex-end izmantošana nodrošina, ka izvēlnes elementi tiek līdzināti pa labi LTR režīmā un pa kreisi RTL režīmā, neprasot atsevišķus stilus katram virzienam.

2. piemērs: Tērzēšanas saskarnes stils

Tērzēšanas saskarnē jūs varētu vēlēties attēlot sūtītāja ziņojumus labajā pusē un saņēmēja ziņojumus kreisajā pusē (LTR režīmā). RTL režīmā tam vajadzētu būt apgrieztam.


 .message.sender {
 margin-inline-start: auto; /* Pabīda sūtītāja ziņojumus uz beigām */
 }

 .message.receiver {
 margin-inline-end: auto; /* Pabīda saņēmēja ziņojumus uz sākumu (efektīvi pa kreisi LTR režīmā) */
 }

3. piemērs: Vienkārša kartītes izkārtojuma izveide

Izveidojiet kartīti ar attēlu kreisajā pusē un teksta saturu labajā pusē LTR režīmā, un otrādi RTL režīmā.


 .card {
 display: flex;
 }

 .card img {
 margin-inline-end: 1em;
 }

margin-inline-end uz attēla automātiski piemēros atkāpi labajā pusē LTR režīmā un kreisajā pusē RTL režīmā.

4. piemērs: Ievades lauku apstrāde ar konsekventu līdzinājumu

Iedomājieties formu ar etiķetēm, kas līdzinātas pa labi no ievades laukiem LTR izkārtojumos. RTL režīmā etiķetēm jābūt kreisajā pusē.


 .form-group {
 display: flex;
 align-items: center;
 }

 .form-group label {
 text-align: end;
 padding-inline-end: 0.5em;
 width: 100px; /* Fiksēts platums etiķetei */
 }

 .form-group input {
 flex: 1;
 }

Izmantojot `text-align: end`, teksts tiek līdzināts pa labi LTR režīmā un pa kreisi RTL režīmā. `padding-inline-end` nodrošina konsekventu atstarpi neatkarīgi no izkārtojuma virziena.

Migrācija no fiziskajām uz loģiskajām īpašībām

Esošas kodu bāzes migrēšana, lai izmantotu loģiskās īpašības, var šķist biedējoša, taču tas ir pakāpenisks process. Šeit ir ieteicamā pieeja:

Identificējiet no virziena atkarīgos stilus: Sāciet ar CSS noteikumu identificēšanu, kas izmanto fiziskās īpašības, piemēram, left, right, margin-left, margin-right utt.
Izveidojiet loģisko īpašību ekvivalentus: Katram no virziena atkarīgajam noteikumam izveidojiet atbilstošu noteikumu, izmantojot loģiskās īpašības (piemēram, aizstājiet margin-left ar margin-inline-start).
Rūpīgi pārbaudiet: Pārbaudiet savas izmaiņas gan LTR, gan RTL izkārtojumos, lai pārliecinātos, ka jaunās loģiskās īpašības darbojas pareizi. Jūs varat izmantot pārlūkprogrammas izstrādātāja rīkus, lai simulētu RTL vidi.
Pakāpeniski aizstājiet fiziskās īpašības: Kad esat pārliecināts, ka loģiskās īpašības darbojas pareizi, pakāpeniski noņemiet sākotnējās fiziskās īpašības.
Izmantojiet CSS mainīgos: Apsveriet CSS mainīgo izmantošanu, lai definētu kopīgas atstarpju vai izmēru vērtības, padarot stilu pārvaldību un atjaunināšanu vieglāku. Piemēram: :root { --spacing-inline: 1em; } .element { margin-inline-start: var(--spacing-inline); margin-inline-end: var(--spacing-inline); }

Pārlūkprogrammu atbalsts

CSS loģiskajām īpašībām ir lielisks pārlūkprogrammu atbalsts visās mūsdienu pārlūkprogrammās, ieskaitot Chrome, Firefox, Safari un Edge. Tomēr vecākas pārlūkprogrammas var tās neatbalstīt dabiski. Lai nodrošinātu saderību ar vecākām pārlūkprogrammām, varat izmantot polyfill bibliotēku, piemēram, css-logical-props.

Papildu tehnikas

Loģisko īpašību apvienošana ar CSS Grid un Flexbox

Loģiskās īpašības nevainojami darbojas ar CSS Grid un Flexbox, ļaujot jums izveidot sarežģītus un responsīvus izkārtojumus, kas pielāgojas dažādiem rakstības režīmiem. Piemēram, Flexbox varat izmantot justify-content: start un justify-content: end, lai līdzinātu elementus attiecīgi konteinera loģiskajā sākumā un beigās.

Loģisko īpašību izmantošana ar pielāgotajām īpašībām (CSS mainīgajiem)

Kā parādīts iepriekš, CSS mainīgie var padarīt jūsu loģisko īpašību kodu vēl uzturējamāku un lasāmāku. Definējiet kopīgas atstarpju un izmēru vērtības kā mainīgos un atkārtoti izmantojiet tās visā savā stila lapā.

Rakstības režīma un virziena noteikšana ar JavaScript

Dažos gadījumos jums var būt nepieciešams noteikt pašreizējo rakstības režīmu vai virzienu, izmantojot JavaScript. Jūs varat izmantot getComputedStyle() metodi, lai iegūtu writing-mode un direction īpašību vērtības.

Labākās prakses

Dodiet priekšroku loģiskajām īpašībām: Kad vien iespējams, izmantojiet loģiskās īpašības, nevis fiziskās, lai nodrošinātu, ka jūsu izkārtojumi ir pielāgojami dažādiem rakstības režīmiem.
Pārbaudiet dažādās valodās: Pārbaudiet savu vietni dažādās valodās, ieskaitot LTR un RTL valodas, lai pārliecinātos, ka izkārtojums darbojas pareizi.
Izmantojiet polyfill vecākām pārlūkprogrammām: Izmantojiet polyfill bibliotēku, lai nodrošinātu loģisko īpašību atbalstu vecākās pārlūkprogrammās.
Apsveriet pieejamību: Nodrošiniet, lai jūsu izkārtojumi būtu pieejami lietotājiem ar invaliditāti, neatkarīgi no rakstības režīma vai virziena.
Saglabājiet konsekvenci: Kad sākat lietot loģiskās īpašības, saglabājiet konsekvenci visā projektā, lai izvairītos no neskaidrībām un nodrošinātu uzturējamību.
Dokumentējiet savu kodu: Pievienojiet komentārus savam CSS, lai paskaidrotu, kāpēc jūs izmantojat loģiskās īpašības un kā tās darbojas.

Noslēgums

CSS loģiskās īpašības ir spēcīgs rīks, lai izveidotu responsīvus, internacionalizētus tīmekļa izkārtojumus. Izprotot rakstības režīmu un teksta virziena pamatjēdzienus un pieņemot loģiskās īpašības savā CSS, jūs varat veidot vietnes, kas apkalpo globālu auditoriju un nodrošina konsekventu lietotāja pieredzi dažādās valodās un kultūrās. Izmantojiet loģisko īpašību spēku un atklājiet jaunu elastības un uzturējamības līmeni savā tīmekļa izstrādes darbplūsmā. Sāciet ar mazumiņu, eksperimentējiet un pakāpeniski iekļaujiet tās savos esošajos projektos. Jūs drīz redzēsiet priekšrocības, ko sniedz pielāgojamāka un globāli apzinātāka pieeja tīmekļa dizainam. Tā kā tīmeklis turpina kļūt globālāks, šo tehniku nozīme tikai pieaugs.

MLOG